import React, { useEffect, useState, useRef } from 'react';
import textApng from './img/textApng.png';
import style from './index.module.css';
import { OriginDtsType } from './type';
import ApngPlay from './ApngPaly';




const Test1 = (props) => {
  const imgRef = useRef<HTMLImageElement | null>();
  const imgRef2 = useRef<HTMLImageElement | null>();
  const imgRef3 = useRef<HTMLImageElement | null>();
  const dts = useRef<OriginDtsType[] | undefined>([]);
  const frameCls = useRef<ApngPlay>();

  const dts1: OriginDtsType[] = [
    {
      imgRef: imgRef,
      obj: null,
      imgPic: textApng
    },
    {
      imgRef: imgRef2,
      obj: null,
      imgPic: textApng
    },
    {
      imgRef: imgRef3,
      obj: null,
      imgPic: textApng
    }
  ]

  const playNextFrame = () => {
    const { obj } = dts.current[2];
    obj.startFrame = 7;
    obj.endFrame = 9;
    obj.endLoopPlay = ZeraFrame;
    obj.initPlay();
  }


  const playStartFrame = () => {
    const { obj } = dts.current[1];
    obj.startFrame = 4;
    obj.endFrame = 6;
    obj.initPlay();
  }


  const ZeraFrame = () => {
    // 初始化执行第一帧
    const { obj } = dts.current[0];
    // obj._loop = true;
    obj.startFrame = 0;
    obj.endFrame = 3;
    obj.startLoopPlay = playStartFrame;
    obj.endLoopPlay = playNextFrame;
    obj.initPlay();
  }


  const init = async () => {
    dts.current = dts1;
    frameCls.current = await new ApngPlay();
    await frameCls.current.loopList(dts.current);
    ZeraFrame();
  }

  useEffect(() => {
    init();
  }, [])
  return (
    <div className={style.flex}>
      <div>
        <img width={150} ref={imgRef} />
        <div>初始播放1</div>
      </div>
      <div>
        <img width={150} ref={imgRef2} />
        <div>初始播放2</div>
      </div>
      <div>
        <img width={150} ref={imgRef3} />
        <div>初始播放3</div>
      </div>
    </div>
  )
}

export default Test1;
